'use strict';

import React, {Component} from 'react';

import {
    View,
    Image,
    ImageBackground,
    Dimensions,
    TouchableWithoutFeedback,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    ScrollView,
    TouchableHighlight,
    TouchableNativeFeedback,
    Switch,
    StatusBar,
} from 'react-native';

import ToastUtil from '../../../../core/utils/toast-util';
import {Loading, EasyLoading} from 'react-native-easy-loading';
import DatePicker from 'react-native-datepicker'
import CameraButton from '../../../../core/component/comp.button-camera';
import Color from '../../../../core/constant/color';
import Http from '../../../../core/utils/http';
import ScrollableTabView from '@cross2d/react-native-scrollable-tab-view';
import TabBar from '../../../../core/component-biz/comp.tab-bar';
import PageDongTaiNear from '../dong-tai/page.main-dongtai.near'
import PageDongTaiHot from '../dong-tai/page.main-dongtai.hot'
import PageDongTaiFocus from '../dong-tai/page.main-dongtai.focus'
import Util from '../../../../core/utils/util'

class MainChartOnlineScene extends React.Component {

    static navigationOptions = ({navigation, screenProps}) => ({
        title: "线上聊天",
        headerTintColor: "white",
        headerStyle: {
            backgroundColor: Color.PRIMARY_COLOR,
            elevation: null
        },
    });

    constructor(props) {
        super(props);
        this.state = {}
    }

    componentDidMount() {
    }

    genTabPageNearUI(){
        return (<PageDongTaiNear/>)
    }

    genTabPageHotUI(){
        return (<PageDongTaiHot/>)
    }

    genTabPageFocusUI(){
        return (<PageDongTaiFocus/>)
    }

    render() {
        return (
            <ScrollableTabView
                removeClippedSubviews={true}
                page={0}
                style={styles.body}
                initialPage={0}
                renderTabBar={
                    () =>
                        <TabBar underlineColor={Color.PRIMARY_COLOR} tabBarTextStyle={styles.tabBarText} tabStyles={{ tab:styles.tabBar }} />
                }>
                <View tabLabel={{label: "声优聊天",badge: 0}} label="声优聊天" style={styles.pagePanel}>
                    {this.genTabPageNearUI()}
                </View>
                <View tabLabel={{label: "叫醒服务",badge: 0}} label="叫醒服务" style={styles.pagePanel}>
                    {this.genTabPageHotUI()}
                </View>
            </ScrollableTabView>
        )
    }
}

const styles = StyleSheet.create({
    body: {
        backgroundColor: '#FFF',
        flex: 1,
    },

    pagePanel:{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height:200,
    },
    scrollableTabBar: {
        backgroundColor: 'white',
    },
    tabBarContainer: {
        marginTop: 0,
        marginBottom: 0,
        alignItems: 'flex-end',
        borderBottomWidth: 0,

    },
    tabBar: {
        width: Util.getScreenWidth() / 3,
        height:30,
        marginLeft: 0,
        alignItems: 'center',
    },
    tabBarText: {
        fontSize: 14,
        // borderWidth:1,
    },

});

export default MainChartOnlineScene;